<template>
    <!-- Header End -->
    <div class="container-xxl py-5 bg-dark page-header bg-5 mb-5">
        <div class="container my-5 pt-5 pb-4">
            <h1 class="display-3 text-white mb-3 animated slideInDown"> 联系我们 </h1>
            <p class="display-6 text-white"> 星辰大海，与佑恩同行，创造更多可能！ </p>
        </div>
    </div>
    <!-- Header End -->

    <div class="container-xxl py-5">
        <div class="container">
            <h2 class="mb-5">联系我们</h2>
            <div class="row mb-5 g-5 align-items-start">
                <div class="col-lg-6 wow fadeIn" data-wow-delay="0.1s">
                    <div class="map-box" id="map-cd"></div>
                </div>
                <div class="col-lg-6">
                    <h4 class="mb-4 wow fadeInUp" data-wow-delay="0.6s"> 佑恩咨询成都 </h4>
                    <p class="mb-2">
                        <i class="fa fa-map-marker-alt me-2"></i>
                        地址：四川省成都市高新区吉泰路566号莱普敦中心3栋2单元3009
                    </p>
                    <p class="mb-2">
                        <i class="fa fa-phone-alt me-2"></i>
                        电话：+86 028-63859677
                    </p>
                    <p class="mb-2">
                        <i class="fa fa-envelope me-2"></i>
                        邮箱：Bryan.He@unlinked.cn
                    </p>
                </div>
            </div>
            <div class="row mb-5 g-5 align-items-start">
                <div class="col-lg-6 wow fadeIn" data-wow-delay="0.1s">
                    <div class="map-box" id="map-bj"></div>
                </div>
                <div class="col-lg-6">
                    <h4 class="mb-4 wow fadeInUp" data-wow-delay="0.6s"> 佑恩咨询北京 </h4>
                    <p class="mb-2">
                        <i class="fa fa-map-marker-alt me-2"></i>
                        地址：北京市朝阳区常营长楹天街西区星座二栋2501
                    </p>
                    <p class="mb-2">
                        <i class="fa fa-phone-alt me-2"></i>
                        电话：+86 010-85398225
                    </p>
                    <p class="mb-2">
                        <i class="fa fa-envelope me-2"></i>
                        邮箱：Yuri.Lu@unlinked.cn
                    </p>
                </div>
            </div>
            <div class="row mb-5 g-5 align-items-start">
                <div class="col-lg-6 wow fadeIn" data-wow-delay="0.1s">
                    <div class="map-box" id="map-qd"></div>
                </div>
                <div class="col-lg-6">
                    <h4 class="mb-4 wow fadeInUp" data-wow-delay="0.6s"> 佑恩咨询青岛 </h4>
                    <p class="mb-2">
                        <i class="fa fa-map-marker-alt me-2"></i>
                        地址：山东青岛市北区 台柳路鸿府大厦402
                    </p>
                    <p class="mb-2">
                        <i class="fa fa-envelope me-2"></i>
                        邮箱：HR@unlinked.cn
                    </p>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
    import { onMounted, nextTick, ref, onUnmounted } from 'vue';
    const maps = ref();

    onMounted(() => {
        nextTick(() => {
            var map1 = new AMap.Map('map-cd', {
                zoom: 14,
                center: [104.064673, 30.545612]
            });
            var marker1 = new AMap.Marker({
                map: map1,
                position: [104.064673, 30.545612]
            });
            marker1.on('click', function () {
                marker1.markOnAMAP({
                    name: '四川省成都市高新区吉泰路566号莱普敦中心3栋2单元3009',
                    position: marker1.getPosition()
                });
            });
            var map2 = new AMap.Map('map-bj', {
                zoom: 14,
                center: [116.599546, 39.925088]
            });
            var marker2 = new AMap.Marker({
                map: map2,
                position: [116.599546, 39.925088]
            });
            marker2.on('click', function () {
                marker2.markOnAMAP({
                    name: '北京市朝阳区常营长楹天街西区星座二栋2501',
                    position: marker2.getPosition()
                });
            });
            var map3 = new AMap.Map('map-qd', {
                zoom: 14,
                center: [120.396825, 36.116373]
            });
            var marker3 = new AMap.Marker({
                map: map3,
                position: [120.396825, 36.116373]
            });
            marker3.on('click', function () {
                marker3.markOnAMAP({
                    name: '山东青岛市北区 台柳路鸿府大厦402',
                    position: marker3.getPosition()
                });
            });

            maps.value = [map1, map2, map3];
            if (AMap.UA.mobile) {
                (<any>document.getElementsByClassName('info')[0]).style.display = 'none';
            }
        });
    });

    onUnmounted(() => {
        if (maps.value) {
            for (let map of maps.value) {
                map.destroy();
            }
        }
    });
</script>

<style>
    /*contact*/

    .map-box {
        height: 240px;
        background-color: #fff;
    }
</style>
